<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <%--<script src="jquery-2.1.0.js"></script>--%>
</head>
<body>
<%--搜索模块--%>
<div class="layui-form-item" style="padding: 10px">
    <form class="layui-form" id="sss" >
        <div class="layui-form-item">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-inline">
                <input type="text" name="deptNo" placeholder="请输入部门编号" class="layui-input">
            </div>
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <input type="text" name="dname" placeholder="请输入部门名称"  class="layui-input">
            </div>
            <button type="button" class="layui-btn " lay-submit lay-filter="ssbtu">搜索</button>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
        </div>
    </form>
</div>
<%--新增或修改模块--%>
<div id="addDeptDiv" style="display: none">

    <form class="layui-form" id="addForm" lay-filter="addForm">
        <input name="deptid" style="display: none">
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-inline">
                <input type="text" name="deptNo"  required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-inline">
                <input type="text" name="dname"  required lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门介绍</label>
            <div class="layui-input-inline">
                <input type="text" name="remark"  required lay-verify="required" placeholder="请输入部门介绍" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <%--<input type="text" name="status"  required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">--%>
                <select name="status">
                    <option value="">请选择状态</option>
                    <option value="1">启用</option>
                    <option value="0">弃用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="addBtnDept">确认</button>
                <button type="reset"  class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
            </div>
        </div>
    </form>
</div>
<%--头部工具栏--%>
<table id="test" class="layui-hide"  lay-filter="test" ></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <%--<button class="layui-btn layui-btn-radius" lay-event="getCheckData">查看选中行数据</button>--%>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData"><i class="layui-icon">&#xe669;</i></button>
        <button type="button" id="add" class="layui-btn layui-btn-radius" lay-event="adddept">添加部门</button>
    </div>
</script>
<script type="text/html" id="barDemo">

    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="up">弃用</a>
    {{#  } }}
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="up">启用</a>
    {{#  } }}
</script>

<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form  = layui.form;
        function showtable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/dept/list'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: 't_dept'
                ,cols: [[
                     {field:'deptid', title:'部门ID', hide:true}
                    ,{field:'deptNo', title:'部门编号'}
                    ,{field:'dname', title:'部门名称'}
                    ,{field:'remark', title:'部门介绍'}
                    ,{field:'status', title:'部门状态',templet:function (d){
                            //alert(d.status)
                            if (d.status == 1){
                                return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">启用</button>';
                            }else{
                                return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">弃用</button>';
                            }
                        }}
                    ,{field:'count',title:'在职员工人数'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                , even: true //开启隔行背景
                ,limit:5//每页显示的条数
                ,limits:[2,5,10,15,20]
            });
        }

        //当页面整个加载完成时，执行的方法
        $(function(){
            showtable();
        })

        form.on('submit(addBtnDept)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/dept/zx',
                data:data.field,//当前表单的所有数据
                dataType: 'json',
                success:function (data){
                    if (data == "1001"){
                        layer.closeAll();
                        layer.msg("新增/修改成功",{icon:1});
                    }else if(data == "1002"){
                        layer.closeAll();
                        layer.msg("新增/修改失败",{icon:5});
                    }else {
                        layer.msg("已有相同部门名称，新增/修改失败",{icon:5});
                    }
                    showtable();
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(ssbtu)',function (data){
            table.reload('test',{
                where:{
                    deptNo:data.field.deptNo,
                    dname:data.field.dname,
                },
                page: {
                    curr:1
                }
            });
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                   /* var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));*/
                    $("#sss")[0].reset();
                     showtable();
                    break;
                case 'adddept':
                    $("#addForm")[0].reset();//点击新增之前先清空表单数据
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '添加部门'
                        ,shade: 0
                        ,amin:3
                        ,maxmin: true
                        ,area:['400px','350px']
                        ,content: $('#addDeptDiv')
                    });
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/dept/max',
                        dataType: 'json',
                        success:function (data){
                            form.val("addForm",{"deptNo":data+1});
                        }
                    })
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'up'){
                /**
                 * 上下架：
                 * 分析：需要参数  bookid  和  status
                 */
                layer.confirm('确定要启用/弃用吗？', function(index){
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/dept/updateStatus',
                        data:{deptid:data.deptid,status:data.status,count:data.count},//当前表单的所有数据
                        dataType: 'json',
                        success:function (data){
                            if (data == "1001"){
                                layer.msg("启用/弃用成功",{icon:1});
                            }else{

                                layer.msg("在职员工人数不为0，弃用失败",{icon:5});
                            }
                            showtable();
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $("#addForm")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '修改部门'
                    ,maxmin: true
                    ,anim: 4
                    ,area:['400px','350px']
                    ,content: $("#addDeptDiv")
                });
                form.val("addForm",data);//将当前点击行的数据填充到表单
            }
        });
    });
</script>
</body>
</html>
